/**
 * html 代码
 * @type {string}
 */
let template = `
    <div id="tool-container">
        <div class="tool-item-box" style="box-shadow: 0 2px 10px 0 rgba(0,0,0,.1);" v-for="data of dataList">
            <div class="tool-item-hd">
                <div class="item-hd-left">
                    <span class="item-hd-title">{{ data.bigTitle }}</span>
                </div>
                <div class="item-hd-right" @click="moreCardData">
                    更多工具 <img src="">
                </div>
            </div>
            <div class="tool-item-bd" style="grid-template-columns: repeat(auto-fill, minmax(288px,1fr));">
                <!-- type1 -->
                <div v-if="data.styleType == 'type1'" class="tool-item-type1" style="box-shadow: 0 0 10px rgba(0,0,0,0.1);" v-for="item of data.itemList" @click.stop="cardClick(item)">
                    <img :src="item.icon" :alt="item.name">
                    <div class="tool-item-content">
                        <div class="tool-name">{{ item.name }}</div>
                        <div class="tool-desc">{{ item.desc }}</div>
                    </div>
                    <div class="tool-item-label" data-style="0" :style="{display: (item.label && item.label.length != 0) ? '' : 'none' }">
                        <div class="label_font">{{ item.label }}</div>
                    </div>
                </div>
                <!-- type2 -->
                <div v-if="data.styleType == 'type2'" class="tool-item-type2" v-for="item of data.itemList">
                    <div class="tool-item-type2-hd">
                        <div class="item-hd-left">
                            <img :src="item.icon" width="52" height="52" :alt="item.name">
                        </div>
                        <div class="item-hd-right" style="width: calc(100% - 65px);">
                            <div class="item-hd-left-top">
                                <span @click.stop="addrClick(item)">{{item.name}}</span>
                            </div>
                            <div class="item-hd-left-bottom">
                                <span class="item-tag" :title="item.tags">🏷️{{item.tags}}</span>
                                <span class="item-category" :title="item.categorys">🔖{{item.categorys}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="tool-item-type2-bd">
                        <div class="item-desc" :title="item.desc">{{item.desc}}</div>
                    </div>
                    <div class="tool-item-type2-ft">
                        <div class="item-link">{{item.addr}}/</div>
                        <div class="item-btn" @click.stop="addrClick(item)">
                            进入
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
`;

/**
 * vue 组件
 *
 * @type {{template: string, data(): {dataList: []}, methods: {addrClick(*): void, loadJsonFile(*): null, cardClick(*): void}, mounted(): void, props: {url: {default: string, type: StringConstructor}, target: {default: string, type: StringConstructor}}}}
 */
let cardTags = {
    template: template,
    props: {
        url: {
            default: '../static/json/type1.json',
            type: String
        },
        target: {
            default: '_blank', // _blank - URL加载到一个新的窗口（默认）, _self - URL替换当前页面
            type: String
        }
    },
    data() {
        return {
            dataList: []
        };
    },
    mounted(){
        let jsonData = this.loadJsonFile(this.url);
        console.log('loadJsonFile==>', jsonData);
        this.dataList.push(jsonData);
    },
    methods: {
        loadJsonFile(url) {
            let jsonData = null;
            let xhr = new XMLHttpRequest();
            xhr.open('GET', url, false);
            xhr.send();
            if (xhr.status === 200) {
                jsonData = JSON.parse(xhr.responseText);
            } else {
                console.error('Failed to load JSON file:', xhr.status);
            }
            return jsonData;
        },
        cardClick(itemData){
            console.log(JSON.stringify(itemData));
            let addr = itemData.addr;
            if (addr) {
                window.open(addr, this.target);
            }
        },
        addrClick(itemData){
            console.log(JSON.stringify(itemData));
            let addr = itemData.addr;
            if (addr) {
                window.open(addr, this.target);
            }
        },
        moreCardData(){
            alert("大千世界无奇不有，度娘了解一下 ~~~~~~~~ ")
        }
    }
}

/**
 * 载入组件
 *
 * @type {{template: string, data(): {dataList: []}, methods: {addrClick(*): void, loadJsonFile(*): null, cardClick(*): void}, mounted(): void, props: {url: {default: string, type: StringConstructor}, target: {default: string, type: StringConstructor}}}}
 */
window.$docsify.vueComponents['card-tags'] = cardTags;